{% extends 'partials/base.tpl.html' %}
{% block css %}
<link rel="stylesheet" href="../../static/css/index.css" media="screen"/>
{% endblock %}

{% block content %}
<div class="index-page">
    <div class="row">
        <div class="col-md-2"><img src="../static/images/icons/time.png"></div>
        <div class="col-md-3"><span class="title">Uptime</span></div>
        <div class="col-md-1"></div>
        <div class="col-md-6 content-wrapper">
            <span class="content">
                <strong>{{ uptime['uptime'] }}</strong> &sdot;
                load avg <strong>@</strong>
                {{ cpu['loads'][0] }},
                {{ cpu['loads'][1] }},
                {{ cpu['loads'][2] }}
            </span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2"><img src="../static/images/speedometer.png"></div>
        <div class="col-md-3"><span class="title">CPU usage</span></div>
        <div class="col-md-1">
            <img src="../static/images/icons/{{ cpu['alert'] }}.png">
        </div>
        <div class="col-md-6 content-wrapper">
            <span class="content">
                CPU is running at <strong>{{ cpu['cpu_data'][0]['freq'] or 'N/A' }}MHz</strong>
                <br>
                <small>
                min: <strong>{{ cpu['cpu_data'][0]['min_freq'] or 'N/A' }}MHz</strong> &sdot;
                max: <strong>{{ cpu['cpu_data'][0]['max_freq'] or 'N/A' }}MHz</strong> &sdot;
                {{ cpu['cpu_data'][0]['governor'] or 'N/A' }}
                ({{ cpu['cpu_count'] or 'N/A' }} cores)
                </small>
            </span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2"><img src="../static/images/temperature.png"></div>
        <div class="col-md-3"><span class="title">CPU temperature</span></div>
        <div class="col-md-1">
            <img src="../static/images/icons/{{ cpu_temp['alert'] }}.png">
        </div>
        <div class="col-md-6 progress-content-wrapper simple">
            <div class="progress content">
                <div class="progress-bar progress-bar-{{ cpu_temp['alert'] }}" role="progressbar"
                     aria-valuenow="{{ cpu_temp['percentage'] }}" aria-valuemin="0" aria-valuemax="100"
                     style="width: {{ cpu_temp['percentage'] }}%;">{{ cpu_temp['percentage'] }}%</div>
            </div>
            <span class="progress-bar-content">
                celsius: <strong>{{ cpu_temp['degrees_c'] }}&deg;C</strong>
                (of {{ cpu_temp['max_c'] }})
                fahrenheit: <strong>{{ cpu_temp['degrees_f'] }}&deg;F</strong>
                (of {{ cpu_temp['max_f'] }})
            </span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2"><img src="../static/images/memory.png"></div>
        <div class="col-md-3"><span class="title">Memory usage</span></div>
        <div class="col-md-1"><img src="../static/images/icons/{{ ram['alert'] }}.png"></div>
        <div class="col-md-6 progress-content-wrapper simple">
            <div class="progress content">
                <div class="progress-bar progress-bar-{{ ram['alert'] }}" role="progressbar"
                     aria-valuenow="{{ ram['percentage'] }}" aria-valuemin="0" aria-valuemax="100"
                     style="width: {{ ram['percentage'] }}%;">{{ ram['percentage'] }}%</div>
            </div>
            <span class="progress-bar-content">
                free: <strong>{{ ram['free'] }}M</strong> &sdot;
                used: <strong>{{ ram['used'] }}M</strong> &sdot;
                total: <strong>{{ ram['total'] }}M</strong>
            </span>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2"><img src="../static/images/micro_sd_card.png"></div>
        <div class="col-md-3"><span class="title">Swap memory</span></div>
        <div class="col-md-1"><img src="../static/images/icons/{{ swap['alert'] }}.png"></div>
        <div class="col-md-6 progress-content-wrapper simple">
            <div class="progress content">
                <div class="progress-bar progress-bar-{{ swap['alert'] }}" role="progressbar"
                     aria-valuenow="{{ swap['percentage'] }}" aria-valuemin="0" aria-valuemax="100"
                     style="width: {{ '8' if swap['percentage'] < 8 else swap['percentage'] }}%;">
                    {{ swap['percentage'] }}%
                </div>
            </div>
            <span class="progress-bar-content">
                free: <strong>{{ swap['free'] }}M</strong> &sdot;
                used: <strong>{{ swap['used'] }}M</strong> &sdot;
                total: <strong>{{ swap['total'] }}M</strong>
            </span>
        </div>
    </div>

    {% for disk in storage %}
    <div class="row">
        <div class="col-md-2">
            {% if loop.index0 == 0 %}
            <img src="../static/images/sdd_storage.png">
            {% endif %}
        </div>
        <div class="col-md-3">
            {% if loop.index0 == 0 %}
            <span class="title">Storage</span>
            {% endif %}
        </div>

        <div class="col-md-1"><img src="../static/images/icons/{{ disk['alert'] }}.png"></div>
        <div class="col-md-6 progress-content-wrapper">
            <span class="progress-bar-content">{{ disk['mount'] }}</span>
            <div class="progress content">
                <div class="progress-bar progress-bar-{{ disk['alert'] }}" role="progressbar"
                     aria-valuenow="{{ disk['percentage'] }}" aria-valuemin="0" aria-valuemax="100"
                     style="width: {{ '8' if disk['percentage'] < 8 else disk['percentage'] }}%;">
                    {{ disk['percentage'] }}%
                </div>
            </div>
            <span class="progress-bar-content">
                free: <strong>{{ disk['available'] }}</strong>
                used: <strong>{{ disk['used'] }}</strong>
                total: <strong>{{ disk['size'] }}</strong>
                ({{ disk['file_system'] }})
            </span>
        </div>
    </div>
    {% endfor %}

    <div class="row">
        <div class="col-md-2"><img src="../static/images/network.png"></div>
        <div class="col-md-3"><span class="title">Network</span></div>
        <div class="col-md-1"><img src="../static/images/icons/{{ network['connections_alert'] }}.png"></div>
        <div class="col-md-6 content-wrapper">
            <span class="content">
                IP: <strong class="text-info">{{ ip_internal }}</strong> [internal] &sdot;
                <em class="external-ip-loader">fetching...</em>
                <strong class="text-info external-ip"></strong> [external]
                <br>
                received: <strong>{{ network['rx_raw'] or 'N/A' }}</strong>
                sent: <strong>{{ network['tx_raw'] or 'N/A' }}</strong>
                ({{ network['connections'] or 'N/A' }} connections)
            </span>
        </div>
    </div>
</div>
{% endblock %}
